<fieldset class="layui-elem-field layui-field-title">
	<legend>预定客房</legend>
</fieldset>

<form class="layui-form">
<div class="layui-form-item">
	<label class="layui-form-label">姓名</label>
		<div class="layui-input-inline">
			<input type="text" name="name" placeholder="请输入用户的姓名"
			class="layui-input" required lay-verify="required">
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">身份证号</label>
		<div class="layui-input-inline">
			<input type="text" name="idcard" placeholder="请输入用户的身份证号" 
			class="layui-input" required lay-verify="required">
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">电话</label>
		<div class="layui-input-inline">
			<input type="text" name="phone" placeholder="请输入用户的电话号码"
			class="layui-input" required lay-verify="required">
		</div>
	</div>
	
	<input type="hidden" name="userId">
	
	<!-- 房间的信息 -->
	
	<div class="layui-form-item">
		<label class="layui-form-label">入住时间</label>
		<div class="layui-input-inline">
			<input type="text" class="layui-input" name="start" id="start">
		</div>
		<label class="layui-form-label">退房时间</label>
		<div class="layui-input-inline">
			<input type="text" class="layui-input" name="end" id="end">
		</div>
	    <label class="layui-form-label">房间类型</label>
	    <div class="layui-input-inline">
	        <select name="type" lay-filter="type">
	            <option value="">请选择房间类型</option>
	            <option value="0">大床房</option>
	            <option value="1">标准间</option>
	            <option value="2">三人间</option>
	        </select>
	    </div>
	</div>
	
	<div class = "layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn" lay-submit lay-filter="order-add">立即预定</button>
		</div>
	</div>
</form>

<table id="room-list" lay-filter ="room-list"></table>


<script>
layui.use(['form','laydate','table'],function() {
	var form=layui.form,
	laydate=layui.laydate,
	table=layui.table;
	
	//渲染表单
	form.render();
	
	//渲染时间日期
	laydate.render({
		elem: '#start',
		type: 'datetime',
		done: function(value, date, endDate) {
			$("input[name='start']").val(value);
			//在这个方法中，刷新表格
			queryRoom();
		}
	});
	
	laydate.render({
		elem: '#end',
		type: 'datetime',
		done: function(value, date, endDate) {
			$("input[name='end']").val(value);
			queryRoom();
		}
	});
	
	// 电话的监听
	// 根据电话查询数据可中是否已有该用户
		$.ajax({
			url: '/api/user/loginUser',
			type: 'get',
			dataType: 'json',
			success: function(result) {
				if(result.code >= 0) {
					// 获取查询到的用户信息
						//电话
						$("input[name='phone']").val(result.data.phone);
						// 姓名
						$("input[name='name']").val(result.data.name);
						// 身份证号
						$("input[name='idcard']").val(result.data.idcard);
						// id
						$("input[name='userId']").val(result.data.id);
				} else {
					layer.msg(result.msg);
				}
			},
			error: function() {
				layer.msg('请求失败');
			}
	});
	
	// 渲染表格
	table.render({
		elem: '#room-list',
		page: true,
		url: '/api/room/user/query',	// 不能再走原来的搜索
		cols: [[
			{type: 'radio'},
			{title: 'ID',field: 'id'},
			{title: '房间号',field: 'number'},
			{title: '类型',field: 'type',templet: function(d) {
				return ['大床房','标准间','三人间'][d.type];
			}},
			{title: '描述',field: 'dscp'},
			{title: '价格',field: 'price'},
			{title: '状态',field: 'status',templet: function(d) {
				return ['正常','删除'][d.status];
			}},
		]],
		parseData: function(res) {
			return {
				code: res.code,
				msg: res.msg,
				count: res.data.total,
				data: res.data.list,
			}
		}
	});
	
	// 监听房间类型
	form.on('select(type)', function(data){
		queryRoom();
	});
	
	// 监听时间的变化
	function queryRoom() {
		// 1. 获取表单中的一些参数，开始时间，结束时间
		var start = $("input[name='start']").val();
		var end = $("input[name='end']").val();
		
		var type = $("select[name='type']").val();
		console.log(type);
		
		// 2. 带着参数，刷新表格
		table.reload('room-list', {
			where: { start: start, end: end, type: type},  // 向服务器传递开始时间和结束时间
			page: { cur: 1 },  // 重新设置页码
		});
	}
	
	// 表单提交
	form.on('submit(order-add)', function(data){
		var field = data.field;
		
		// 房间的信息
		var checkStatus = table.checkStatus('room-list');
		if (checkStatus.data.length) {
			field.roomId = checkStatus.data[0].id;
		}
		
		// 表单验证
		if (!field.phone || field.phone.length != 11) {
			layer.msg('电话必须是11位');
			return false;
		}
		
		if (!field.name || field.name.length < 2 || field.name.length > 32) {
			layer.msg('姓名必须是2-32位的字符串');
			return false;
		}
		
		if (!field.idcard || field.idcard.length!=18) {
			layer.msg('身份证号必须是18位');
			return false;
		}
		
		//时间
		if (!field.start) {
			layer.msg('请选择入住时间');
			return false;
		}
		
		if (!field.end) {
			layer.msg('请选择退房时间');
			return false;
		}
		
		if (field.start >= field.end) {
			layer.msg('入住时间必须早于退房时间');
			return false;
		}
		
		//房间
		if (!field.roomId) {
			layer.msg('必须选择一个房间');
			return false;
		}
		
		//提交预定数据到服务器
		//ajax
		$.ajax({
			url: '/api/order/user/add',
			data: field,
			type: 'post',
			dataType: 'json',
			success: function(result){
				if(result.code > 0){
					layer.confirm('预订成功，继续预订或者跳转列表？！',{btn:['继续预定','跳转列表']},function(index){
						layer.close(index);
						$("input[name='start']").val("");
						$("input[name='end']").val("");
						
						queryRoom();
					},function(index){
						open('/user/myorder.html')
					});
				}else{
					layer.msg(result.msg);
				}
			},
			error: function(){
				layer.msg('请求失败');
			}
		});
		
		return false;
	});
	
});
</script>